<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父级边框塌陷</title>
</head>
<body>
<style>
    #divall{
        border: 1px solid red;
        /*第二种 设父边框高度*/
        /*height: 200px;*/
        /*第三种 在父级元素上加overflow属性*/
        /*overflow: hidden;*/

    }
    /*第四种*/
    /*父级添加伪类after*/
    #divall:after{
        content: '';          /*在clear类后面添加内容为空*/
        display: block;      /*把添加的内容转化为块元素*/
        clear: both;         /*清除这个元素两边的浮动*/
    }
    #div1{
        width: 200px;
        height: 200px;
        background: red;
        float: left;
    }
    #div2{
        width: 200px;
        height: 200px;
        background: blue;
        float: left;
    }
    /*第一种 加空div 加 clear: both*/
    /*.clear{*/
    /*    clear: both;*/
    /*    border: 1px solid black;*/
    /*}*/

</style>
<div id="divall">
    <div id="div1">

    </div>
    <div id="div2">

    </div>
    <div class="clear"></div>
</div>
</body>
</html>